<template>
	<view class="dream">
		<view class="phone_search">
			<input type="text" v-model="dreamKey" placeholder="梦境的关键词，例如：宠物" />
			<button @click="tips()" type="primary">查询</button>
		</view>
		<view class="showDream">
			<view class="mask" v-html="dreamDetail">
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				dreamKey:"",
				dreamDetail:""
			}
		},
		methods:{
			tips(){
				if(this.dreamKey !== ""){
					uni.showModal({
					    title: '温馨提示',
					    content: '此询结果仅供娱乐，请勿盲目迷信。',
						success: (res) => {
							if (res.confirm) {
							    this.getContent();
							} else if (res.cancel) {
							    this.dreamDetail = ""
							}
						}
					});
				}else{
					uni.showToast({
						title:"不能为空哟",
						icon:"none"
					})
				}
				
			},
			async getContent() {
				const res = await this.$myRequest({
					url: "/?s=App.Common_Dream.Explain",
					method: "post",
					data: {
						dream_keyword: this.dreamKey,
						app_key: "FF119DFB40E63EE8DFD7C74C8A9A4B8D"
					}
				})
				if(res.data.data.err_msg !== ""){
					uni.showToast({
						title: res.data.data.err_msg,
						icon:"none"
					})
				}else{
					this.dreamDetail = res.data.data.explain_result;
				}
			}
		}
	}
</script>

<style lang="scss">
	.phone_search {
		width: 85%;
		height: 80rpx;
		display: flex;
		margin: 30rpx auto;
	
		input {
			border: 1rpx solid #eee;
			flex: 1;
			height: 100%;
			padding-left: 20rpx;
			box-sizing: border-box;
			margin-right: 10rpx;
			border-radius: 20rpx;
		}
	
		button {
			height: 100%;
			border: none;
			line-height: 80rpx;
		}
	}
	.showDream{
		width: 100%;
		height:auto;
		margin: 0 auto;
		background:url("https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2660423166,1542724119&fm=111&gp=0.jpg");
		background-size:cover;
		.mask{
			width: 90%;
			height:100%;
			background:rgba(255,255,255,0.6);
			margin: 0 auto;
			text-indent:40rpx
		}
	}
</style>
